<template>
  <view class="register">
    <uni-forms ref="form" validateTrigger="blur" :model="formData" :rules="rules"  label-width="160rpx">
      <uni-forms-item required label="身份选择" name="authCode">
        <radio-group @change="radioChangeHandler">
          <label> <radio :value="1" /> 我是老师 </label>
          <label> <radio :value="2" /> 我是学生 </label>
        </radio-group>
      </uni-forms-item>
      <uni-forms-item required label="手机号" name="tel">
        <uni-easyinput
          v-model="formData.tel"
          type="text"
          placeholder="请输入正确的手机号码"
        />
      </uni-forms-item>
      <uni-forms-item required label="姓名" name="name">
        <uni-easyinput
          v-model="formData.name"
          type="text"
          placeholder="请输入真实姓名"
        />
      </uni-forms-item>
      <uni-forms-item required label="用户名" name="username">
        <uni-easyinput
          v-model="formData.username"
          type="text"
          placeholder="请输入用户名（使用学号或者教师工号）"
        />
      </uni-forms-item>
      <uni-forms-item required label="密码" name="password">
        <uni-easyinput
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
        />
      </uni-forms-item>
      <button type="primary" @click="clickHandler">注册</button>
    </uni-forms>
  </view>
</template>

<script setup>
import { postRegister } from "@/api/userApi";
import {ruleRequired,phone} from "@/utils/rules"
const formData = ref({
  authCode: "",
  tel: "",
  name: "",
  username: "",
  password: "",
});
const form=ref(null)
const rules ={
    authCode: {
      rules:[ruleRequired("请选择身份信息")]
    },
    tel: {
      rules:phone
    },
    name: {
      rules:[ruleRequired("请填写真实姓名")]
    },
    username: {
      rules:[ruleRequired("请填写用户名(登录账号)")]
    },
    password: {
      rules:[ruleRequired("请填写密码")]
    },
}
const radioChangeHandler = (e) => {
 formData.value.authCode=e.detail.value
};
const clickHandler=()=>{
  form.value.validate().then(res=>{
      postRegister(formData.value).then(res=>{
    msgSuccess("注册成功")
    setTimeout(()=>{
     uni.reLaunch({
      url:"/pages/login/login",
     })
    },500)
  }).catch(err=>{
    msgError(err)
  })
  })

}
</script>

<style scoped>
.register {
  padding: 30rpx;
}
</style>
